<template>
  <div>
    <!-- 玻璃缺陷分析搜索 -->
    <el-form class="table_serch">
      <div class="table_serch_labe">
        <div class="table_serch_labe_title">机种编码</div>
        <el-autocomplete
          size="mini"
          popper-class="my-autocomplete"
          class="product"
          style="margin-left: 10px; margin-top: 8px"
          v-model="formInline.state"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
        >
          <i
            class="el-icon-edit el-input__icon"
            slot="suffix"
            @click="handleIconClick"
          >
          </i>
          <template slot-scope="{ item }">
            <div class="name">{{ item.value }}</div>
            <span class="addr">{{ item.address }}</span>
          </template>
        </el-autocomplete>
      </div>

      <!-- 工业 -->
      <div class="table_serch_labe" style="margin-left: 25px">
        <div class="table_serch_labe_title">工单编码</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            class="product"
            popper-class="my-autocomplete"
            style="margin-left: 10px"
            v-model="formInline.state2"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 15px">
        <div class="table_serch_labe_title">线体编码</div>
        <el-form-item label="">
          <el-autocomplete
            class="product"
            size="mini"
            popper-class="my-autocomplete"
            style="margin-left: 10px"
            v-model="formInline.state3"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 15px">
        <div class="table_serch_labe_title">站点编码</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            class="product"
            popper-class="my-autocomplete"
            style="margin-left: 10px"
            v-model="formInline.state4"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 12px">
        <div class="table_serch_labe_title">班次编码</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            popper-class="my-autocomplete"
            style="width: 140px; margin-left: 10px"
            v-model="formInline.class"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 9px">
        <div class="table_serch_labe_title">统计类型</div>
        <el-form-item label="">
          <el-select
            v-model="formInline.type"
            multiple
            placeholder="请选择"
            size="mini"
            style="width: 130px; margin-left: 12px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left:22px">
        <div class="table_serch_labe_title">起始日期</div>
        <el-form-item label="">
          <el-date-picker
            size="mini"
            v-model="formInline.starttime"
            type="date"
            placeholder="选择日期"
            style="width: 140px; margin-left: 5px"
          >
          </el-date-picker>
        </el-form-item>
      </div>
      <div class="table_serch_labe" style="margin-left:15px">
        <div class="table_serch_labe_title" style="margin-left: 3px">
          结束日期
        </div>
        <el-form-item label="">
          <el-date-picker
            size="mini"
            v-model="formInline.endtime"
            type="date"
            placeholder="选择日期"
            style="width: 140px; margin-left: 5px"
          >
          </el-date-picker>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left:10px">
        <div class="table_serch_labe_title">起始ID</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            class="product"
            popper-class="my-autocomplete"
            style="margin-left: 14px"
            v-model="formInline.state5"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 15px">
        <div class="table_serch_labe_title">结束ID</div>
        <el-form-item label="">
          <el-autocomplete
            class="product"
            size="mini"
            popper-class="my-autocomplete"
            style="width:140px;margin-left:17px"
            v-model="formInline.overid"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 12px">
        <div class="table_serch_labe_title">产品ID</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            popper-class="my-autocomplete"
            style="width: 130px; margin-left: 19px"
            v-model="formInline.class"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left:21px">
        <div class="table_serch_labe_title">玻璃ID</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            popper-class="my-autocomplete"
            style="width: 140px; margin-left: 15px"
            v-model="formInline.class"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 20px">
        <el-button type="mini">查询</el-button>
        <el-button type="mini">刷新</el-button>
        <el-button type="mini">运行</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        recipe: "",
        order: "",
        line: "",
        site: "",
        starttime: "",
        endtime: "",
        errorcode: "",
        class: "",
        type: [],
      },
      options: [
        {
          value: "选项1",
          label: "yield",
        },
        {
          value: "选项2",
          label: "quality",
        },
        {
          value: "选项3",
          label: "defect",
        },
        {
          value: "选项4",
          label: "activation",
        },
        {
          value: "选项5",
          label: "lightup",
        },
      ],
      restaurants: [],
    };
  },
  mounted() {
    // console.log(this.state2);
    this.restaurants = this.loadAll();
  },
  methods: {
    formInlineclick() {
      console.log(this.formInline);
    },
    loadAll() {
      return [{ value: "", address: "" }];
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
  },
};
</script>

<style  scoped>
.table_serch {
  width: 100%;
  min-width: 1000px;
  padding-top: 8px;
  /* border: 1px solid red; */
  background: #fff;
  display: flex;
  flex-wrap: wrap;
}
.table_serch_labe {
  /* border: 1px solid #000; */
  height: 35px;
  display: flex;
  margin-left: 10px;
  margin-bottom: 10px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
.el-button_eb {
  margin-left: 5px;
  color: #fff;
}
.el-select {
  height: 10px;
  margin-left: -6px;
}
.product {
  width: 130px;
}
</style>